<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    header {
      width: 1000px;
      height: 540px;
      margin: 0 auto;
    }

    .header-one {
      width: 1000px;
      height: 30px;
      background-color: rgba(0, 140, 255, 0.747);
    }

    .header-two {
      width: 1000px;
      height: 110px;
    }

    .header-two>* {
      float: left;
    }

    .header-two img {
      margin: 16px 40px 0 50px;
    }

    .header-two a {
      color: black;
      text-decoration: none;
      margin: 70px 7px 0;
    }

    .header-two input {
      width: 200px;
      height: 28px;
      padding-left: 5px;
      margin: 65px 50px 0;
      background: url(./images/搜索标.png) no-repeat;
      background-position: 170px;
    }

    main {
      width: 1000px;
      margin: 0 auto;
    }

    footer {
      width: 1000px;
      height: 300px;
      margin: 0 auto;
      border-top: 1px solid rgb(223, 218, 218);
    }

    .footer-one {
      width: 900px;
      height: 150px;
      margin: 0 auto;
      padding-top: 40px;
    }

    .footer-two {
      width: 1000px;
      height: 90px;
      text-align: center;
      line-height: 120px;
      background-color: rgba(0, 140, 255, 0.747);
    }

    tr {
      line-height: 30px;
    }

    #tr-one {
      width: 900px;
      height: 50px;
      font-size: 22px;
      font-weight: 700;
      padding: 50px 0;
    }

    /* 主体部分 */
    .about {
      width: 1000px;
      height: 500px;
      padding-top: 10px;
      background-color: rgb(244, 244, 244);
    }

    /* 头部公共样式 */
    main .about .title,
    main .invest .title {
      margin-left: calc(50% - 73px);
      margin-bottom: 30px;
      margin-top: 30px;
      width: 146px;
      height: 36px;
      border: 1px solid skyblue;
      text-align: center;
      line-height: 100%;
    }

    main .about .title h2,
    main .invest .title h2 {
      margin-left: calc(73px - 95px / 2);
      width: 95px;
      margin-top: -10px;
      font-size: 22px;
      line-height: 25px;
      background-color: rgb(244, 244, 244);
    }

    /* 关于我们 */
    main .about .about_Content {
      margin: 0px 50px;
      display: flex;
      justify-content: space-around;
      height: 320px;
    }

    main .about .about_Content>div {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      background-color: rgb(236, 236, 236);
    }

    main .about .about_Content .aboute_left .circle,
    main .about .about_Content .aboute_center .circle,
    main .about .about_Content .aboute_right .circle {
      width: 126px;
      height: 126px;
      border-radius: 50%;
      margin-top: 10px;
    }

    .aboute_left {
      width: 270px;
    }

    .aboute_left .circle {
      background-image: url(./images/使命.png);
    }

    .aboute_center {
      width: 319px;
    }

    .aboute_center .circle {
      background-image: url(./images/团队.png);
    }

    .aboute_right {
      width: 270px;
    }

    .aboute_right .circle {
      background-image: url(./images/愿景.png);
    }

    .about_Content p:nth-of-type(1) {
      font-weight: 700;
      margin-top: 10px;
    }

    .about_Content p:nth-of-type(2) {
      font-weight: 700;
    }

    .about_Content p:nth-of-type(3) {
      color: grey;
      padding: 5px;
      line-height: 30px;
      letter-spacing: 2px;
      font-size: 13px;
    }

    .aboute_center p:nth-of-type(3) {
      padding: 5px 30px;
    }

    /* 投资案例内容 */
    .invest {
      width: 900px;
      height: 970px;
      margin: 20px auto;
    }

    .invest_Content {
      display: flex;
      flex-wrap: wrap;
      /* 元素与元素、元素与容器之间的距离都是相等的 */
      justify-content: space-evenly;
    }

    .invest_Content div {
      width: 290px;
      height: 320px;
    }

    .invest_Content div img {
      width: 100%;
      height: 230px;
    }

    .invest_Content div p:nth-of-type(1) {
      font-size: 13px;
      text-align: center;
      line-height: 30px;
      letter-spacing: 2px;
    }

    .invest_Content div p:nth-of-type(2) {
      margin-top: 10px;
      text-align: center;
    }

    .invest_Content div button {
      color: white;
      width: 130px;
      text-align: center;
      font-weight: 700;
      line-height: 30px;
      letter-spacing: 3px;
      background-color: rgba(0, 140, 255, 0.747);
      border: 0px;
    }

    /* 轮播图 */
    .banner {
      width: 900px;
      height: 300px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <header>
    <div class="header-one"></div>
    <div class="header-two">
      <img src="./images/鼎搜网.png" alt="" />
      <a href="#">首页</a>
      <a href="#">鼎搜投资</a>
      <a href="#">鼎搜服务</a>
      <a href="#">鼎搜动态</a>
      <a href="#">鼎搜诚聘</a>
      <a href="#">鼎搜公益</a>
      <input type="text" />
    </div>
    <div class="header-three">
      <img src="./images/主图.png" alt="" />
    </div>

  </header>
  <main>
    <!-- 关于我们 -->
    <div class="about">
      <!-- 标题 -->
      <div class="title">
        <h2>关于我们</h2>
        <h5>ABOUT US</h5>
      </div>
      <!-- 内容 -->
      <div class="about_Content">
        <div class="aboute_left">
          <div class="circle"></div>
          <p>使命</p>
          <p>MISSION</p>
          <p>
            广州鼎搜网企业管理服务有限公司，公司秉承诚信为鼎，共赢为首，服务全网的经营宗旨。鼎搜让世界的生意做得更容易！
          </p>
        </div>
        <div class="aboute_center">
          <div class="circle"></div>
          <p>团队</p>
          <p>TEAM</p>
          <p>
            我们以诚信、自信、超越自我的工作态度，打造商业资本运作新模式，让您的资本运作更佳的观念，致力服务每一个客户！
          </p>
        </div>
        <div class="aboute_right">
          <div class="circle"></div>
          <p>愿景</p>
          <p>VISION</p>
          <p>
            国内首家专业于资产、权益、可投资特色商品的转让、买卖的交易平台服务商。成为中国商业资产转让交易行业的领航者！
          </p>
        </div>
      </div>
      <!-- 标题 -->
      <div class="title">
        <h2>投资案例</h2>
        <h5>OUR PORTFOLIO</h5>
      </div>
    </div>

    <!-- 投资案例-->
    <div class="invest">
      <div class="invest_Content">
        <div>
          <img src="./images/one.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
        <div>
          <img src="./images/two.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
        <div>
          <img src="./images/three.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
        <div>
          <img src="./images/one.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
        <div>
          <img src="./images/two.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
        <div>
          <img src="./images/three.png" alt="" />
          <p>投资项目：广州永泰生活广场火锅转让</p>
          <p><button>点击查看</button></p>
        </div>
      </div>
      <div class="banner"><img src="./images/轮播图.png" alt="" /></div>
    </div>
  </main>
  <footer>
    <div class="footer-one">
      <table>
        <colgroup>
          <col width="150px" />
          <col width="150px" />
          <col width="150px" />
          <col width="150px" />
          <col width="300px" />
        </colgroup>
        <tr id="tr-one">
          <td>简介</td>
          <td>帮助</td>
          <td>共赢</td>
          <td>导航</td>
          <td rowspan="4"><img src="./images/全国服务热线.png" width="300" alt="" /></td>
        </tr>
        <tr>
          <td>鼎搜网简介</td>
          <td>用户注册</td>
          <td>网站合作</td>
          <td>地图首页</td>
        </tr>
        <tr>
          <td>鼎搜服务</td>
          <td>关于鼎搜</td>
          <td>用户协议</td>
          <td>职能分类</td>
        </tr>
        <tr>
          <td>会员身份实名认证</td>
          <td>在线咨询</td>
          <td>会员身份实名认证</td>
          <td>企业名录</td>
        </tr>
      </table>
    </div>
    <div class="footer-two">Copyright &copy;2015 鼎搜网(www.dinsoo.com)版权所有</div>
  </footer>
</body>

</html>